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BEST AVAILABLE IMAGES 

Defective images within this document are accurate representations of the 
original documents submitted by the applicant. 
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• FADED TEXT 
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• BLACK OR VERY BLACK AND WHITE DARK PHOTOS 

• GRAY SCALE DOCUMENTS 

IMAGES ARE BEST AVAILABLE COPY. 



As rescanning documents will not correct images, 
please do not report the images to the 
Image Problems Mailbox. 
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While the body of most HTML documents is text, an appropriate seasoning of 
horizontal rules, images, and other multimedia elements make for a much more 
inviting and attractive document. These features of HTML are not simply gratu- 
itous geegaws that make your documents look pretty, mind you. Multimedia 
elements bring HTML documents alive, providing a dimension of valuable infor- 
mation often unavailable in other media, such as print. In this chapter, we 
describe in detail how you can insert special multimedia elements into your docu- 
ments, when their use is appropriate, and how to avoid overdoing it. 

5.1 Horizontal Rules 

Horizontal rules give you a way to separate sections of your document visually. 
That way, you give readers a clean, consistent, visual indication that one portion 
of your document has ended and another portion is beginning. Horizontal rules 
effectively set off small sections of text, delimit document headers and footers, 
and provide extra visual punch to headings within your document. 

5.1.1 The<hr>Tag 

The <hr> tag tells the browser to insert a horizontal rule across the display 
window. Like the <br> tag, <hr> forces a simple line break, although unlike 
<br>, <hr> causes the paragraph alignment to revert to the default (left- 
justified). The browser places the rule immediately below the current line, and 
content flow resumes below the rule. [<br>, 4.7.1] 

The rendering of a horizontal rule is at the discretion of the browser. Typically, it 
extends across the entire document. Graphical browsers may render the rule with 
a chiseled or embossed effect; character-based browsers most likely use dashes or 
underscores to create the rule. 
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<img> 



Function: 

Inserts an image into a document 

Attributes: 

ALIGN 
ALT 

BORDER 
CONTROLS ® 
DYNSRC (D) 
HEIGHT 
HSPACE 
ISMAP 
LOOP ® 
LOWSRC El 
NAME EH 
ONABORT ES 
ONERROR ES 
ONLOAD ED 
SRC 

START <D> 
USEMAP 
VSPACE 
WIDTH 

End tag: 

None 
Contains: 

Nothing 

Used in: 

text 



you should make sure your documents make sense and are useful, even if the 

images are completely removed. 

5 2.6.1 The src attribute 

separate folder they often name something like "pics" or ".mages. [URI* /-J 
For example, this HTML foment places an image of a famous kumouat P ack,ng 
plant into the narrative text (see Figure 5-8): 



5.2 Inserting Images in Your Documents 
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Here we are, on day 17 of the tour, in front of the kumquat 

packing plant: 

<p> 

<img src= " pics /packing_p lan t .gif "> 
<P> 

What an exciting moment, to see the boxes of fruit moving 

In the example, the paragraph (<p>) tags surrounding the <img> tag cause the 
browser to render the image by itself with some vertical space after the preceding text 
and before the trailing text. Text may also abut the image, as we describe in 5.2.6.4. 




Figure 5-8- Image integrated with text 



5.2.6.2 The lowsrc attribute 

To the benefit of users, particularly those with slow Internet connections, 
Netscape provides the lowsrc companion to the src attribute in the <img> tag 
as a way to speed up document rendering. The lowsrc attribute's value, like 
src, is the URL of an image file that the browser loads and displays when it first 
encounters the <img> tag. Then, when the document has been completely 
loaded and can be read by the user, Netscape goes back and retrieves the image 
specified by the src attribute. 

Ostensibly, the lowsrc image is a low-resolution, abbreviated version of the final 
src image that loads faster by comparison to quickly give the reader an idea of 
its content until the final, higher-resolution image eventually replaces it onscreen. 
But the lowsrc attribute can also be used for some very special effects. 

Netscape uses the lowsrc image's dimensions to reserve space in the document 
for both the lowsrc and src images, unless you explicitly allocate that space with 
the height and width attributes described later in this chapter. Hence, if the 
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Chapter 5: Rules, Images, and Multimedia 



dimensions of the image specified in the src attribute are different than those for 
the lowsrc image or your explicitly included height and width values, the src 
image will be reduced, enlarged, stretched, and/or compressed to fit in the allotted 
space. Moreover, the lowsrc and src images needn't be identical, so you might 
take advantage of the delayed rendering of the src image for simple animation. 

The lowsrc attribute is for Netscape only. Other browsers ignore it and only 
load the image specified by the src attribute. Netscape won't load either image if 
the user chooses not to auto-load images. In that case, both images will load in 
order when the user clicks the images button or clicks the image icon place- 
holder. No browser loads the lowsrc image only; you must include a src 
image, otherwise nothing will appear except the missing image icon. 

5.2.63 The alt attribute 

$ The alt attribute specifies alternative text the browser may show if image display 

is not possible or disabled by the user. It's an option, but one we highly recom- 
mend you exercise for most images in your document. This way, if the image is 
not available, the user still has some indication of what it is that's missing. 

The value for the alt attribute is a text string of up to 1024 characters, enclosed 
in quotation marks if you include spaces or offher punctuation. The alternative 
| text may contain entity references to special characters, but it may not contain any 

i other sort of markup; in particular, no style tags are allowed. 

* Graphical browsers ignore the alt attribute if the image is available and down- 

loading is enabled by the user. Otherwise, they insert the alt attribute's text as a 

! label next to an image placeholder icon. Well-chosen alt labels thereby addition- 

ally support those users with a graphical browser who have disabled their 

v automatic image download because of a slow connection to the Web. 

'i Nongraphical, text-only browsers like Lynx put the alt text directly into the 

content flow just like any other text element. So. when used effectively, the alt 
tag sometimes can transparendy substitute for missing images. (Your text-only 
browser users will appreciate not being constancy reminded of their second-class 
Web citizenship.) For example, consider using an asterisk as the alt attribute 
alternative to a special bullet icon: 

<h3ximg src= "pics/ fancy Jbullet .gif " alt= • * ">Introduction</h3> 

A graphical browser displays the bullet image, while in a nongraphical browser 
the alt asterisk takes the place of the missing bullet. Similarly, use alt text to 
replace special image bullets for list items. For example, the following code: 

<ul> 

<li> Kumquat recipes <img src="pics/nev. gif " alt=" (New! ) ■> 
<li> Annual harvest dates 
</ul> 



